    <template>
        <div>
            <Tabcomponent></Tabcomponent>
            <PersonalItem>
                <div class="coupon">
                    <ul>
                        <li @click="clicklis(0)" :class="lisID==0?'listyle1':''">
                            {{$t('langs.Centers.coupon.li1')}}
                            <span v-if="lisID==0"></span>
                        </li>
                        <li @click="clicklis(1)" :class="lisID==1?'listyle2':''">
                            {{$t('langs.Centers.coupon.li2')}}
                            <span v-if="lisID==1"></span>
                        </li>
                        <li @click="clicklis(2)" :class="lisID==2?'listyle3':''">
                            {{$t('langs.Centers.coupon.li3')}}
                            <span v-if="lisID==2"></span>
                        </li>
                    </ul>
                    <div>{{$t('langs.Centers.coupon.careful')}}</div>
                    <div class="coupon-box" v-if="lisID==0">
                        <div v-for="(item,index) in 5" :key="index">
                            <div><span>85</span>折</div>
                            <div>
                                <p>邀请好友  立减500元</p>
                                <p>优惠码：FA15</p>
                                <p>2020.03.16-2020.03.23</p>
                                <p>部分品牌不可用 <span @click="modalityShow=true">使用规则</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="coupon-box"  v-if="lisID==1">
                        <div v-for="(item,index) in 5" :key="index">
                            <div><span>85</span>折</div>
                            <div>
                                <p>邀请好友  立减500元</p>
                                <p>优惠码：FA15</p>
                                <p>2020.03.16-2020.03.23</p>
                                <p>部分品牌不可用 <span @click="modalityShow=true">使用规则</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="coupon-box"  v-if="lisID==2">
                        <div v-for="(item,index) in 5" :key="index">
                            <div><span>85</span>折</div>
                            <div>
                                <p>邀请好友  立减500元</p>
                                <p>优惠码：FA15</p>
                                <p>2020.03.16-2020.03.23</p>
                                <p>部分品牌不可用 <span @click="modalityShow=true">使用规则</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </PersonalItem>
            <Modalbox v-if="modalityShow">
                <div class="modality">
                    <div>
                        <div>活动说明</div>
                        <p>仅就本活动之目的，新用户包括: 1)参加本活动时尚
                        未注册成为Farfetch平台用户的人员(下称“新注册用
                        户”) ;和2)虽已注册但从未曾在Farfetch下单购买过商品的用户(下称“非活跃用户”)。</p>
                        <p>仅就本活动之目的，邀请人指向用户发送[链接]的邀
                        请发起人;接受邀请发起的人即为被邀请人。为免疑义义，如存在多个邀请人向同一个新用户发出邀请的情形，将以新用户首先接受的邀请来判断邀请人。</p>
                        <p>邀请人可随时可向新用户发起邀请，不限次数。</p>
                    </div>
                    <i class="iconfont icon-htmal5icon21" @click="modalityShow=false"></i>
                </div>
            </Modalbox>
        </div>
    </template>

    <script>
    import Tabcomponent from '@/components/Tabcomponent.vue'//头部导航
    import PersonalItem from "@/components/PersonalItem.vue"
    import Modalbox from "@/components/Modalbox.vue"//模态框
    export default {
        components: {
            Tabcomponent,
            PersonalItem,
            Modalbox
        },
        data() {
            return {
                lisID: 0,
                modalityShow: false
            }
        },
        methods: {
            clicklis(i) {
                this.lisID = i
            }
        },
    }

    </script>

<style lang='scss'>
.coupon {
    >ul {
        width: 856px;
        border-bottom: 1px solid #000;
        height: 59px;
        position: relative;
        margin: 0;
        >li {
            font-size: 20px;
            line-height: 59px;
            position: absolute;
            top: 0;
            padding: 0 41px;
            z-index: 2;
            cursor: pointer;
            >span {
                display: inline-block;
                width: 100%;
                height: 1px;
                background: #fff;
                position: absolute;
                bottom: 0px;
                left: 0;
            }
        }
        >li:nth-child(2) {
            left: 142px;
        }
        >li:nth-child(3) {
            left: 284px;
        }
    }
    >div:nth-child(2) {
        font-size: 14px;
        font-weight: 600;
        margin-top: 20px;
    }
    >.coupon-box {
        margin-top: 10px;
        padding-bottom: 40px;
        overflow: hidden;
        >div {
            width: 338px;
            height: 108px;
            border: 1px solid #000;
            border-right: 2px;
            box-shadow: 1px 3px 10px 1px rgba(0,0,0,0.5);
            float: left;
            margin-right: 70px;
            margin-top: 41px;
            >div {
                float: left;
            }
            >div:nth-child(1) {
                font-size: 18px;
                padding: 16px 20px;
                >span {
                    font-size: 60px;
                    font-weight: 100;
                }
            }
            >div:nth-child(2) {
                margin-left: 16px;
                padding-top: 16px;
                >p:nth-child(1) {
                    font-size: 12px;
                    color: #CAB580;
                    font-weight: 800;
                }
                >p:nth-child(2) {
                    font-size: 15px;
                    font-weight: 800;
                    margin-top: 5px;
                }
                >p:nth-child(3) {
                    font-size: 11px;
                    margin-top: 5px;
                } 
                >p:nth-child(4) {
                    font-size: 10px;
                    padding-top: 2px;
                    >span {
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
.modality {
    width: 755px;
    height: 469px;
    background: #E6E6E6;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -377px;
    margin-top: -234px;
    >div {
        width: 698px;
        height: 409px;
        background: #dddddd;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -350px;
        margin-top: -204px;
        >div {
            font-size: 20px;
            font-weight: 600;
            padding: 26px 0 0 26px;
        }
        >p {
            font-size: 14px;
            line-height: 30px;
            padding: 0 30px;
            margin-top: 38px;
        }
    }
    >i {
        font-size: 28px;
        color: #333;
        position: absolute;
        right: 54px;
        top: 52px;
        cursor: pointer;
    }
}
.listyle1 {
    border-bottom: 2px solid #fff;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
.listyle2 {
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
}
.listyle3 {
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
}
</style>